<template>
    <div id='after-loan-history'>
     <el-tabs v-model="activeName" @tab-click="handleClick">
        
        <el-tab-pane label="正常" name="second">
        <div class="form-table">
            <div class="form-content">
                <div class="form-item" v-if='all'>
                    <div class="form-item__key">催收人员：</div>
                    <div class="form-item__value">
                       <el-select v-model="operatorId" placeholder="请选择">
                        <el-option
                          v-for="item in operatorList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">手机号码：</div>
                    <div class="form-item__value">
                        <input type="text" placeholder="请输入手机号码" v-model='phone'>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">用户名字：</div>
                    <div class="form-item__value">
                        <input type="text" placeholder="请输入用户名字" v-model='userName'>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">开始时间：</div>
                    <div class="form-item__value">
                        <picker-date picker-id='startTime' :key='startTime' placeholder='请选择开始时间' v-model='startTime'></picker-date>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item__key">结束时间：</div>
                    <div class="form-item__value">
                        <picker-date picker-id='endTime' :key='endTime' placeholder='请选择结束时间' v-model='endTime'></picker-date>
                    </div>
                </div>
                <a class="card-title__button" @click='getList()'>确定</a>
            </div>
        </div>
        
        <loading v-if='loading'></loading>
        <p class='no-data' v-if='!loading && !records.length'>暂无数据</p>
        <div class="table-list" v-if='!loading && records.length'>
            <table>
                <thead class="table-list__head">
                    <tr>
                        <th>序号</th>
                        <th>借款人</th>
                        <th>手机号码</th>
                        <th>借款金额</th>
                        <th>应还款金额</th>
                        <th>约定还款日</th>
                        <th>实际还款日</th>
                        <th>逾期天数</th>
                        <th>业务客服</th>
                        <!-- <th>跟进次数</th> -->
                        <!-- <th>操作</th> -->
                    </tr>
                </thead>
                <tbody class='table-list__body have-border'>
                    <tr v-for='item in records'>
                        <td>{{ item.number || placeholder }}</td>
                        <td>{{ item.name || placeholder }}</td>
                        <td>{{ item.phone || placeholder }}</td>
                        <td>{{ item.lendAmount | toYuan }}元</td>
                        <td>{{ item.repayAmount | toYuan }}元</td>
                        <td>{{ item.needRepayDate || placeholder }}</td>
                        <td>{{ item.repayTime || placeholder }}</td>
                        <td>{{ item.overDueDays || placeholder }}</td>
                        <td>{{ item.loanOperator || placeholder }}</td>
                       <!--  <td>{{ item.followCount || placeholder }}</td> -->
                       <!--  <td>
                            <div class='option-box'>
                                <span class='option-button' @click='goDetail(item.id)'>查看</span>
                            </div>
                        </td> -->
                    </tr>
                </tbody>
            </table>
            
              <el-pagination class="pan"  @current-change="handleCurrentChange" :current-page="listInfo.pageNum"   :page-size="listInfo.pageSize"   layout="total,  prev, pager, next, jumper" 
                :total="totalCount" :background="true">
               </el-pagination>
        </div>
        </el-tab-pane>




        <el-tab-pane label="展期" name="first">
            <div class="form-table">
                <div class="form-content">
                    <div class="form-item" v-if='all'>
                        <div class="form-item__key">催收人员：</div>
                        <div class="form-item__value">
                            <el-select v-model="operatorIdPeriod" placeholder="请选择">
                                <el-option
                                  v-for="item in operatorList"
                                  :key="item.id"
                                  :label="item.name"
                                  :value="item.id">
                                </el-option>
                              </el-select>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="form-item__key">手机号码：</div>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入手机号码" v-model='phonePeriod'>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="form-item__key">用户名字：</div>
                        <div class="form-item__value">
                            <input type="text" placeholder="请输入用户名字" v-model='userNamePeriod'>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="form-item__key">开始时间：</div>
                        <div class="form-item__value">
                            <picker-date picker-id='startTimePeriod' :key='startTimePeriod' placeholder='请选择开始时间' v-model='startTimePeriod'></picker-date>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="form-item__key">结束时间：</div>
                        <div class="form-item__value">
                            <picker-date picker-id='endTimePeriod' :key='endTimePeriod' placeholder='请选择结束时间' v-model='endTimePeriod'></picker-date>
                        </div>
                    </div>
                    <a class="card-title__button" @click='getListPeriod'>确定</a>
                </div>
            </div>
            <loading v-if='loadingPeriod'></loading>
        <p class='no-data' v-if='!loadingPeriod && !recordsPeriod.length'>暂无数据</p>
        <div class="table-list" v-if='!loadingPeriod && recordsPeriod.length'>
            <table>
                <thead class="table-list__head">
                    <tr>
                        <th>序号</th>
                        <th>借款人</th>
                        <th>手机号码</th>
                        <th>借款金额</th>
                        <!-- <th>应还款金额</th> -->
                        <th>约定还款日</th>
                        <th>实际还款日</th>
                        <!-- <th>逾期天数</th> -->
                        <th>业务客服</th>
                        <!-- <th>跟进次数</th> -->
                        <!-- <th>操作</th> -->
                    </tr>
                </thead>
                <tbody class='table-list__body have-border'>
                    <tr v-for='item in recordsPeriod'>
                        <td>{{ item.number || placeholder }}</td>
                        <td>{{ item.name || placeholder }}</td>
                        <td>{{ item.phone || placeholder }}</td>
                        <td>{{ item.lendAmount | toYuan }}元</td>
                        <!-- <td>{{ item.repayAmount | toYuan }}元</td> -->
                        <td>{{ item.needRepayTime || placeholder }}</td>
                        <td>{{ item.repayTime || placeholder }}</td>
                        <!-- <td>{{ item.overDueDays || placeholder }}</td> -->
                        <td>{{ item.followName || placeholder }}</td>
                       <!--  <td>{{ item.followCount || placeholder }}</td> -->
                       <!--  <td>
                            <div class='option-box'>
                                <span class='option-button' @click='goDetail(item.id)'>查看</span>
                            </div>
                        </td> -->
                    </tr>
                </tbody>
            </table>
            
              <el-pagination class="pan"  @current-change="handleCurrentChangePeriod" :current-page="pageIndexPeriod"   :page-size="pageSizePeriod"   layout="total,  prev, pager, next, jumper" 
                :total="totalCountPeriod" :background="true">
               </el-pagination>
        </div>
        </el-tab-pane>
       
      </el-tabs>
        
        
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import toYuan from '../filters/filter-toYuan'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { repayApi, financeApi, authApi, allApi, lenderApi } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            tabBox,
            tab,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            datePicker
        },
        filters:{
            dateFormat,
            toYuan,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                placeholder:'--',
                all:false,
                operatorId:'',
                queryAll:false,
                userName:'',
                curItem:{},
                phone:'',
                status:'',
                statusList:[],
                operatorList:[],
                startTime:'',
                endTime:'',
                title:'',
                tip:'',
                listInfo:{},
                records:[],
                loading:true,
                totalCount:"",
                activeName:"second",
                operatorIdPeriod:"",
                phonePeriod:"",
                userNamePeriod:"",
                startTimePeriod:"",
                endTimePeriod:"",
                pageIndexPeriod:1,
                recordsPeriod:[],
                loadingPeriod:"",
                valuePeriod:"",
                totalCountPeriod:"",
                pageSizePeriod:10,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            hasUserCount(){
                return !_.isEmpty(this.userCount)
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
            //展期
            getListPeriod(){
                this.pageIndexPeriod=1,
                this.initPeriod()
            },
            initPeriod(){
                let msg ={
                    pageIndex:this.pageIndexPeriod,
                    pageSize:10,
                    phone:this.phonePeriod,
                    name:this.userNamePeriod,
                    queryAll:this.queryAll,
                    operatorId:this.operatorIdPeriod,
                    actualRepayTimeFrom:this.startTimePeriod,
                    actualRepayTimeTo:this.endTimePeriod,
                }
                this.loadingPeriod=true
                repayApi.repayFollowExtendDataList(msg)
                .then(result=>{
                   console.log(result)
                   this.loadingPeriod=false
                   this.recordsPeriod=result.records
                   this.totalCountPeriod=result.totalCount
                   this.pageIndexPeriod=result.pageNum

                })
                .catch(error => {
                    console.error(error)
                    this.loadingPeriod=false
                })
            },
            handleCurrentChangePeriod(val){
                this.pageIndexPeriod=val;
                this.initPeriod()
            },






            //正常   
            
             handleCurrentChange(val){
                //console.log(`当前页: ${val}`);
                this.getList(val)
            },
            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function

            goDetail(id){
                this.$router.replace({
                    name:'after-loan-history',
                    query:_.merge({},this.$route.query,{
                        num:this.listInfo.pageNum
                    })
                })
                this.$router.push({
                    name:'after-loan-detail',
                    params:{
                        id:id
                    }
                })
            },
            handleClick(item){
                console.log(item)
            },
            showModalDetail(item){
                this.show_modal_detail = true
                this.curDetail = item
            },
            showModalRecommend(item){

                this.curRecommend = {
                    value:'',
                    text:'添加到最后'
                },
                this.recommendType = {
                    value:'',
                    text:'请选择推荐类型'
                }
                this.curItem = item
                this.curUserId = item.userId

                this.show_modal_recommend = true
                
            },
            showModalFreeze(item){
                this.curItem = item
                this.curUserId = item.userId

                this.showFreeze = true
                
            },
            showModalCancleRecommend(item){
                this.show_modal_cancle_recommend = true
                this.curItem = item
                if(!item.borrowRecommendPosition && item.lendRecommendPosition){
                    this.cancleRecommendType = {
                        value:'lend',
                        text:'小b推荐'
                    }
                    return
                }
                if(item.borrowRecommendPosition && !item.lendRecommendPosition){
                    this.cancleRecommendType = {
                        value:'borrow',
                        text:'小c推荐'
                    }
                    return
                }
                this.cancleRecommendType = {
                    value:'',
                    text:'请选择取消推荐类型'
                }
            },
            getNumber(){
                allApi.borrowCount()
                .then(result=>{
                    this.borrowNumber = result
                })
                .catch(error => {
                    console.error(error)
                })
                allApi.lendCount()
                .then(result=>{
                    this.lendNumber = result
                })
                .catch(error => {
                    console.error(error)
                })
            },
            getList(num = 1){
                this.loading = true
                repayApi.historyFollowList({
                    pageIndex:num,
                    pageSize:10,
                    phone:this.phone,
                    queryAll:this.queryAll,
                    userName:this.userName,
                    operatorId:this.operatorId,
                    stringDateFrom:this.startTime,
                    stringDateTo:this.endTime
                })
                .then(result=>{
                    this.loading = false
                    this.listInfo = result
                    this.totalCount=result.totalCount
                    this.records = result.records
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            confirmTip(){
                this.showConfirm = false
                this.setRecommend()
            },
            getOperator(){
                repayApi.operatorList()
                .then(result=>{
                    this.operatorList = result
                    console.log(this.operatorList)
                     this.operatorList.unshift({
                            id:"",
                            name:"所有"
                        })
                    console.log(this.operatorList)
                })
                .catch(error => {
                    console.error(error)
                })
            },
            init(){
                let num = this.$route.query.num
                this.all = localStorage.getItem("admin") == "admin"
                this.queryAll = false
                if(this.all){
                    this.operatorId = ''
                    this.queryAll = true
                    this.userName = ''
                    this.getOperator()
                }
                this.getList(num)
            }
        },
        created(){
            this.init()
            this.initPeriod()
        },
        watch: {
            '$route' (to, from) {
                this.init()
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #after-loan-history{
        margin-top:20px;
    }
    body .card-title__button-box .component-button-loading{
        margin-left:20px;
        width:125px;
        height:44px;
        font-size:16px;
    }
   .card-title__button{
    margin-left:20px;
   }
   body .form-item{
    font-size:16px;
    color:#333;
   }
</style>
